<template>
  <div id="echarts1"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      let array = JSON.parse(JSON.stringify(this.data))
      let myChart = this.$echarts.init(document.getElementById('echarts1'))
      //字符串截取
      var wordLength = (value) => {
        var ret = '' //拼接加\n返回的类目项
        var maxLength = 5 //每项显示文字个数
        var valLength = value.length //X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
        if (rowN > 1) {
          //如果类目项的文字大于3,
          for (var i = 0; i < rowN; i++) {
            var temp = '' //每次截取的字符串
            var start = i * maxLength //开始截取的位置
            var end = start + maxLength //结束截取的位置
            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
            temp = value.substring(start, end) + '\n'
            ret += temp //凭借最终的字符串
          }
          return ret
        } else {
          return value
        }
      }
      var data = array.sort((a, b) => {
        return b.num - a.num
      }) //降序

      //偏移量
      var offsetData = [
        [84, 70],
        [20, 70],
        [52, 30],
      ]
      //symbolSize 散点气泡大小
      var symbolSizeData = [120, 116, 98]
      //
      //循环定义series的data值
      var datas = []
      for (var i = 0; i < data.length; i++) {
        var item = data[i]
        datas.push({
          name: wordLength(item.name) + '\n' + item.num,
          value: offsetData[i],
          symbolSize: symbolSizeData[i],
          label: {
            normal: {
              textStyle: {
                fontSize: 16,
              },
            },
          },
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.RadialGradient(0.5, 0.45, 0.7, [
                {
                  offset: 0.3,
                  color: 'rgba(0,215,233,0.1)',
                },
                {
                  offset: 1,
                  color: 'rgba(0,215,233,0.8)',
                },
              ]),
              opacity: 0.8,
              shadowColor: '#045878',
              borderWidth: 1,
              borderColor: 'rgba(0, 215, 233, 1)',
              shadowBlur: 10,
              shadowOffsetX: 1,
              shadowOffsetY: 1,
            },
          },
        })
      }

      var option = {
        grid: {
          show: false,
          top: 10,
          bottom: 10,
        },
        xAxis: [
          {
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30,
          },
        ],

        series: [
          {
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                  fontSize: '20',
                },
              },
            },

            itemStyle: {
              normal: {
                color: '#00acea',
              },
            },
            data: datas,
          },
        ],
      }
      // 图表动效及点击效果end
      myChart.setOption(option)
    },
  },
}
</script>
